<template>
  <div class="imgUpload">
    <el-upload
      action=""
      list-type="picture-card"
      v-if="!imgUrl"
      :before-upload="beforeUpload"
      :http-request="httpRequest"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 判断是否传图片 -->
    <div class="imgBox" v-else>
      <img :src="imgUrl" alt="" @click="dialogVisible = true" v-imgerror="defaultImg"/>
      <i class="el-icon-circle-close" @click="delImg"></i>
    </div>
    <!-- 进度条 -->
    <el-progress
      v-if="showPercentage"
      :percentage="percentage"
      status="success"
      class="percentage"
      :show-text="false"
    ></el-progress>
    <!-- 图片预览面板 -->
    <el-dialog title="图片预览" :visible.sync="dialogVisible">
      <div class="previewImg"><img :src="imgUrl" alt="" class="img" /></div>
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  name: 'imgupload',
  props: ['imgUrl'],
  data () {
    return {
      //   控制预览面板的显示与隐藏
      dialogVisible: false,
      //   上传通讯云的存储对象
      cos: null,
      percentage: 0, // 进度条对应百分比
      showPercentage: false, // 控制进度条的显示与隐藏
      defaultImg: require('@/assets/common/img.jpeg'), // 默认图片
    }
  },
  methods: {
    delImg () {
      this.$emit('update:imgUrl', '')
    },
    beforeUpload (file) {
      // 上传之前的图片检查(格式与大小)
      console.log(file)
      /* if (!(file.type == 'image/png' || file.type == 'image/jgeg')) {
        this.$message.error('图片格式只能为 jpg 或 png')
      }
      if (!(file.size < 2 * 1024 * 1024)) {
        this.$message.error('图片大小不能超过 2M')
      }
      return */
      // 大小不能大于 2M
      const less2M = file.size / 1024 / 1024 < 2
      // 类型只能是 jpg & png
      const isType = file.type === 'image/jpeg' || file.type === 'image/png'
      // 判断
      if (!less2M) {
        this.$message.error('图片大小不能超过 2M')
      }
      if (!isType) {
        this.$message.error('只支持 jpg 或者 png 格式的图片')
      }
      return less2M && isType
    },
    httpRequest (file) {
      // 覆盖默认的上传行为
      this.showPercentage = true // 开启进度条
      // 使用
      console.log(file)
      this.cos.putObject(
        {
          Bucket: 'sherlock-1307224010' /* 必须 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: file.file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: file.file, // 上传文件对象
          onProgress: progressData => {
            // progressData: 上传过程中的实时进度对象
            console.log(JSON.stringify(progressData))
            this.percentage = progressData.percent * 100
            if (progressData.percent == 1) {
              setTimeout(() => {
                this.showPercentage = false
              }, 500)
            }
          }
        },
        (err, data) => {
          // data:上传成功后的返回值
          // err:上传出错的错误信息
          console.log(err || data)
          this.$emit('update:imgUrl', 'http://' + data.Location)
        }
      )
    }
  },
  created () {
    // 初始化存储对象
    this.cos = new COS({
      SecretId: 'AKIDmNp32lDPKyLRHXbQ0LQFo7AxUmob7OPA', // 身份识别 ID
      SecretKey: 'XpseAQRChwwf7IDrEK9hz1oLcdOvDF1e' // 身份密钥
    })
  }
}
</script>

<style lang="scss" scoped>
.imgUpload {
  .imgBox {
    width: 150px;
    height: 150px;
    position: relative;

    &:hover i {
      display: block;
    }

    img {
      width: 150px;
      height: 150px;
    }
    i {
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      color: #5cb6ff;
      display: none;
    }
  }

  .previewImg {
    text-align: center;
    .img {
      width: 60%;
    }
  }

  .percentage {
    width: 150px;
    margin-top: 6px;
  }
}
</style>
